<template>
  <div class="content-box">
    <div class="content-box-heard">
      <div class="heard-type1" v-if="props.heardType == 1">
        <div
          class="heard-type1-item heard-type1-item1"
          @click="setType(1)"
          :class="{ 'heard-type1-item-active': parmas.type === 1 }"
        >
          平台公有库
        </div>
        <div
          class="heard-type1-item heard-type1-item2" 
          @click="setType(4)"
          :class="{ 'heard-type1-item-active': parmas.type === 4 }" 
        >
          单位公有库
        </div>
      </div>
      <div v-if="props.heardType == 5" class="select-item">
        <t-select v-model="parmas.refId" @change="changeInit">
          <t-option :key="item.id" :label="item.name" :value="item.id" v-for="item in groupList" />
        </t-select>
      </div>
      <div v-else style="display: flex">
        <p class="tip-box" v-if="store.isActivitys">参加策展活动的展览，私有库展品为活动主办方的</p>
      </div>
      <div class="right-menu">
        <seachInputs v-model="parmas.value" @onEnterValue="onEnterValue" />
        <div class="dot-box">
          <span
            class="dot"
            v-if="
              parmas.LevelId !== 0 ||
              parmas.typeId !== 0 ||
              parmas.AgeId !== 0 ||
              parmas.companyId !== -1 ||
              parmas.IsAudio !== -1 ||
              parmas.IsExternal !== -1 ||
              parmas.IsRelate !== 1
            "
          ></span>
          <i class="doorIcon right-menu-icon" @click="openDre">&#xe666;</i>
        </div>
      </div>
    </div>
    <div class="pop-table-box">
      <t-table
        :table-layout="tableLayout"
        :loading="loading"
        row-key="id"
        :data="list"
        :columns="columns"
        :max-height="'52vh'"
        :selected-row-keys="selectedRowKeys"
        select-on-row-click
        @select-change="rehandleSelectChange"
        :resizable="false"
      >
        <template #isDisable="{ row }">
          <div class="isDisable-box">
            <t-popup :content="row.message" destroy-on-close v-if="row.isDisable">
              <t-tag style="border: 0px; cursor: pointer; margin-left: -0px" variant="outline"
                ><ErrorCircleFilledIcon
              /></t-tag>
            </t-popup>
          </div>
        </template>
        <!-- props.tabDatas -->
        <template #coverUrl="{ row }">
          <img
            :src="$filters.getLinkUrl(row.coverUrl, '?imageView2/1/h/48/w/48/format/webp')"
            alt=""
            v-if="row.coverUrl"
            class="avator-box t-image--fit-cover t-image--position-center"
          />
          <div class="avator-box avator-box-null" v-else></div>
        </template>
        <template #typeId="{ row }">
          <t-select :disabled="true" :borderless="true" v-model="row.typeId" placeholder="未添加类型">
            <t-option v-for="item in props.tabType.select3" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
        </template>
        <template #ageId="{ row }">
          <div class="cascader-box">
            <t-cascader
              :disabled="true"
              :borderless="true"
              placeholder="未添加年代"
              v-model="row.ageId"
              :options="props.tabType.select4"
              :keys="{
                value: 'id',
                children: 'children',
                label: 'text',
              }"
              clearable
              @change="onChange"
            />
          </div>
        </template>
        <template #SpecificAge="{ row }">
          <div class="text-ov-hid-style">
            {{ row.SpecificAge ? row.SpecificAge : '--' }}
          </div>
        </template>
        <template #size="{ row }">
          <div class="text-ov-hid-style">{{ row.size ? row.size : '--' }}</div>
        </template>
        <template #levelId="{ row }">
          <t-select :disabled="true" :borderless="true" v-model="row.levelId" placeholder="未添加级别">
            <t-option v-for="item in props.tabType.select1" :key="item.id" :label="item.text" :value="item.id" />
          </t-select>
        </template>
        <template #publishStatus="{ row }">
          <div>
            {{ row.companyName }}
          </div>
        </template>
        <template #operation="{ row }" v-if="props.right">
          <div class="hw-box-style-flex" v-if="store.projectRole !== 3">
            <div class="operation-box">
              <span class="hw-click-cursor" @click="recovery(row.id, 1)">查看 </span>
            </div>
            <div class="operation-box">
              <span class="hw-click-cursor" @click="remove(row.id)">移除</span>
            </div>
            <div class="operation-box">
              <span
                v-if="row.isCompanyUser"
                class="hw-click-cursor"
                :class="{ 'isEdit-role': row.isCompanyUser }"
                @click="recovery(row.id, 2, row.isCompanyUser)"
                >编辑
              </span>
            </div>
          </div>
        </template>
        <template #empty>
          <div class="hw-flex-style-c-c-c hw-box-style-flex-clm null-box-style">
            <img
              class="null-img-1"
              src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/exhibitNull.png"
              alt=""
            />
            <span class="null-title-1">暂无展品</span>
          </div>
        </template>
      </t-table>
    </div>
    <t-row style="margin: 16px 0px" class="pagination-boxs">
      <t-col :span="12" v-if="total !== 0">
        <t-pagination
          v-model="parmas.pageNo"
          v-model:pageSize="parmas.pageSize"
          :total="total"
          show-sizer
          :show-page-size="true"
          :page-size-options="pageSizeOptions"
          @change="onChange"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </t-col>
    </t-row>

    <messageModel
      submitText="移除"
      title="提示"
      :visible="visible1"
      problem="确定移除此展品？"
      message="移除后可再次添加"
      @closeClick="closeClick"
      @submitClick="submitClick"
    />
  </div>
  <div class="drawer-parent">
    <drawer :tabType="props.tabType" :lookType="props.heardType" :visible="visible" @close="close" @Confirm="Confirm" />
  </div>
</template>
<script setup lang="ts">
// @ts-nocheck
import drawer from '@/pages/project/prijectMenu/components/plan/drawer.vue';
import { showpieceRelate } from '@/api/exhibit/exhibit';
import seachInputs from '@/components/seach/seach.vue';
import { ErrorCircleFilledIcon } from 'tdesign-icons-vue-next';
import { column, listdata, delColumn1 } from '../../../../Exhibits/data';
import { MessagePlugin } from 'tdesign-vue-next';
import messageModel from '@/components/messageModel/index.vue';
import { treeList } from '@/api/user/user';
import { urls } from '@/utils/request/upload';
import { useRouter } from 'vue-router';
import { folderSave, folderGet, Getfolder, setFold, folderDel } from '@/api/folder/folder';
import { enterpriseList, exhibitDisable, exhibitMove, exhibitPublish, exhibitWithdrawn } from '@/api/exhibit/exhibit';
import { LockOnIcon } from 'tdesign-icons-vue-next';
import { ref, computed, reactive, defineExpose } from 'vue';
import { useProjectStore } from '@/store';
import { number } from 'echarts/core';

const pageSizeOptions = [
  { label: '每页 10 条', value: 10 },
  { label: '每页 20 条', value: 20 },
  { label: '每页 50 条', value: 50 },
  { label: '每页 100 条', value: 100 },
];
const router = useRouter();
const store = useProjectStore();
const props = defineProps({
  tabType: {
    type: Object,
  },
  tabDatas: {
    type: Array,
  },
  parmas: {
    type: Object,
  },
  right: {
    type: Boolean,
  },
  heardType: {
    type: Number,
  },
  isexbit: {
    type: Number,
  },
});

//1 平台公有库 2私有库 3项目展品库 4.单位展品库
const parmas = reactive({
  type: 1,
  // projectId: localStorage.getItem('projectId'),
  companyId: -1,
  moduleId: 0,
  typeId: 0,
  AgeId: 0,
  LevelId: 0,
  SourceId: 0,
  value: '',
  pageNo: 1,
  pageSize: 20,
  IsAudio: -1,
  IsExternal: -1,
  refId: -1,
  IsRelate: 1,
});
// const starParmas = reactive({
//   value: '',
//   pageNo: 1,
//   pageSize: 12,
//   folderId: -1,
// });
if (props.isexbit) {
  parmas.IsRelate = 0;
}
const loading = ref(false);
const delId = ref(0);
const emit = defineEmits(['addExhibit', 'removeId']);
const groupList = ref([]); //我的收藏分组
const visible1 = ref(false);
const visible = ref(false);
const tableLayout = ref('fixed');
const emptyData = ref(false);
const list = ref([]);
const total = ref(0);

const columns = computed(() => {
  // dataColumn = delColumn1;
  // let dataColumn = [];
  // if (!props.right) {
  //   dataColumn = delColumn1;
  // } else {
  //   dataColumn = column;
  // }
  // dataColumn.forEach((el) => {
  //   if (el.title == '状态') {
  //     el.title = '来源';
  //   }
  // });
  let Columns = [
    {
      colKey: 'row-select',
      type: 'multiple',
      width: 50,
      checkProps: ({ row, rowIndex }) => ({ disabled: row.isDisable }),
    },
    {
      colKey: 'isDisable',
      title: '',
      width: 20,
    },
    { colKey: 'coverUrl', title: '图片', width: 100, ellipsis: true },
    { colKey: 'name', title: '展品名称', width: 100, ellipsis: true },
    { colKey: 'typeId', title: '类型', width: 80, ellipsis: true },
    { colKey: 'ageId', title: '年代', width: 140, ellipsis: true },
    { colKey: 'SpecificAge', title: '具体年代', width: 120, ellipsis: true },
    { colKey: 'size', title: '尺寸', width: 200, ellipsis: true },
    { colKey: 'levelId', title: '级别', width: 80, ellipsis: true },
    {
      colKey: 'publishStatus',
      title: '来源',
      width: 150,
      ellipsis: true,
    },
  ];
  return Columns;
});
const selectedRowKeys = ref([]);
const changeInit = () => {
  init();
};
const init = async () => {
  try {
    let res = await showpieceRelate(localStorage.getItem('projectId'), parmas);
    console.log(res);
    list.value = res.data.data;
    total.value = res.data.total;
  } catch {}
  //
};
const onEnterValue = () => {
  init();
};
const setType = (type: number) => {
  parmas.type = type;

  init();
};
const changeVlaue = (e: any) => {
  parmas.menu = e;
  // init();
};
const getStarGroup = async () => {
  try {
    let { data } = await folderGet(4);
    console.log(data);
    groupList.value = data;
  } catch (err) {
    console.log(err);
  }
};
parmas.type = props.heardType;
if (props.heardType === 5) {
  getStarGroup();
}
init();
const openDre = () => {
  visible.value = true;
  store.setModelIndex(true);
};
const close = () => {
  visible.value = false;
};
const Confirm = (info: any) => {
  visible.value = false;
  parmas.pageNo = 1;
  parmas.typeId = info.typeId !== null ? info.typeId : 0;
  parmas.AgeId = info.AgeId !== null ? info.AgeId : 0;
  parmas.LevelId = info.LevelId !== null ? info.LevelId : 0;
  parmas.IsAudio = info.IsAudio !== null ? info.IsAudio : -1;
  parmas.companyId = info.companyId !== null ? info.companyId : -1;
  parmas.IsExternal = info.IsExternal !== null ? info.IsExternal : -1;
  init();
};
const publish = (e: number) => {
  //发布展品
  exhibitPublish(e).then((res) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`发布成功`);
      // init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};
const recovery = (e?: number, type: number, role: Boolean) => {
  if (type == 2 && !role) {
    return;
  }
  router.push({
    path: '/prijectMenu/lookExhibit',
    query: {
      id: e,
      status: type,
    },
  });
};
const onPageSizeChange = (size) => {
  parmas.pageNo = 1;
  init();
};
const onCurrentChange = (index, pageInfo) => {
  //分页事件
  init();
};
const withdrawn = (e: number) => {
  exhibitWithdrawn(e).then((res: any) => {
    if (res.statusCode == 200) {
      MessagePlugin.success(`撤回成功`);
      // init();
    } else {
      MessagePlugin.error(res.errors);
    }
  });
};

const onChange = (pageInfo) => {};
const addaddExhibits = (e: number) => {
  //新建展品
  router.push({ path: '/Exhibits/addExhibitLibrary', query: { type: e } });
};

const rehandleSelectChange = (value, { selectedRowData }) => {
  //恢复列表选项
  selectedRowKeys.value = value;
  console.log(selectedRowKeys.value, '列表选项');
  emit('addExhibit', selectedRowKeys.value);
};
const remove = (e) => {
  delId.value = e;
  visible1.value = true;
  store.setModelIndex(true);
};
const closeClick = () => {
  visible1.value = false;
  store.setModelIndex(false);
};
const submitClick = () => {
  //删除展品
  emit('removeId', delId.value);
  visible1.value = false;
  store.setModelIndex(false);
};
const clearList = () => {
  selectedRowKeys.value = [];
  init();
};
defineExpose({
  clearList,
});
</script>

<style lang="less" scoped>
@import '../../pages/Exhibits/index.less';

.content-box {
  width: 100%;
  //   height: 60vh;
  // max-width: 65vw;
  margin: 0 auto;

  :deep(.t-input.t-is-disabled) {
    background: #fff;
  }
  .pop-table-box {
    width: 100%;
    height: calc(52vh);
    // min-height: 52vh;
    :deep(.t-table__content) {
      max-height: calc(52vh);
    }
    :deep(.t-table--layout-fixed) {
      max-height: calc(52vh);
    }
    :deep(.t-table table) {
      width: 100%;
      max-height: calc(52vh);
      overflow: auto;
    }
  }
  :deep(.t-table__header tr) {
    background: #f5f5f5;
    height: 48px;
  }
  :deep(.t-input.t-is-disabled .t-input__inner) {
    color: rgba(0, 0, 0, 0.9);
  }

  :deep(.t-select.t-select-input--borderless .t-select__right-icon) {
    display: none;
  }
  :deep(.t-cascader .t-fake-arrow) {
    display: none;
  }
  :deep(.t-select-input--borderless .t-input) {
    border: none;
  }
}
.t-table--bordered td,
.t-table--bordered th {
  border: none;
}

.t-tabs__nav-container.t-is-top::after {
  display: none;
  background: #fefefe;
}
.heards-box {
  width: 100%;
  background: #fefefe;
  border-radius: 2px;
  padding: 10px 16px;
  padding-bottom: 0;
  border: 1px solid #e62b17;
  margin-bottom: 20px;
}
.t-button--variant-outline {
  border-color: var(--td-border-level-2-color);
}
.t-button__text {
  color: #fff;
}
.operation-box {
  display: flex;
  // justify-content: center;
  align-items: center;
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e62b17;
    margin-right: 8px;
  }
}
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-item {
  display: flex;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
}
.pop-item:hover {
  background: #f0e9e1;
  color: rgba(210, 173, 119, 0.9);
}
.select-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.select-box-item {
  padding: 5px 16px;
  border-radius: @radius-hw-box1;
  border: 1px solid #e7e7e7;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 14px;
  margin-right: 10px;
}
.select-box-item-active {
  border: 1px solid #e62b17;
  color: #e62b17;
}
.t-col {
  margin-top: 0px;
  margin-bottom: 0px;
}
:deep(.t-card__body) {
  padding-top: 24px;
}
.footer-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.avator-box {
  width: 48px;
  height: 48px;
  border-radius: 1px;
}
.avator-box-null {
  background: #d8d8d8;
}
.style-publish1 {
  color: #c5c5c5;
}
.style-publish2 {
  color: #ed7b2f;
}
.style-publish3 {
  color: #00a870;
}
.style-publish4 {
  color: #ed7b2f;
}

.isEdit-role {
  color: @color-text-color3;
}

:deep(.t-table--layout-fixed) {
  width: 100%;
}

.content-box-heard {
  width: 100%;
  display: flex;
  justify-content: space-between;

  height: 36px;
  margin-bottom: 16px;
}
.heard-type1 {
  display: flex;
}
.heard-type1-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 103px;
  height: 28px;
  background: #ffffff;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: rgba(0, 0, 0, 0.59);
  line-height: 22px;
  border: 1px solid #f0f0f0;
}
.heard-type1-item:hover {
  color: #e62b17;
}
.heard-type1-item1 {
  border-radius: 4px 0px 0px 4px;
}
.heard-type1-item2 {
  border-radius: 0px 4px 4px 0px;
}
.heard-type1-item-active {
  border: 1px solid #e62b17;
  color: #e62b17;
}
.right-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .right-menu-icon {
    cursor: pointer;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.59);
    margin-left: 24px;
  }
  .right-menu-icon:hover {
    color: #e62b17;
  }
}
.isDisable-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.t-table__cell-check) {
  // width: 120px !important;
}
.cascader-box {
  :deep(.t-select-input) {
    border: none;
    box-shadow: none;
  }
  :deep(.t-input__wrap) {
    border: none;
    box-shadow: none;
  }
  :deep(.t-input) {
    border: none;
    box-shadow: none;
  }
}
.pagination-boxs {
}
:deep(.t-pagination__select) {
  min-width: 120px !important;
  .t-input--auto-width {
    width: 120px;
  }
}
.drawer-parent {
  :deep(.t-drawer__footer) {
    border: none !important;
  }
}
.dot-box {
  position: relative;
}
.dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e62b17;
}
.tip-box {
  width: 400px;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
}
</style>
